<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="giftDialogVisible"
      width="600px"
      label-width="100%"
      :close-on-click-modal="false"
      :before-close="cancelDialog"
      class="gl_dialog_TitleLine gl_dl_footer"
    >
      <div v-loading="loading" class="gl_px_20">
        <el-form ref="selectedMsg" class="gl_form_mini" :model="selectedMsg" :rules="selectedMsg_rules" label-position="top">
          <el-row>
            <el-form-item prop="giftUrl" label="礼物图片">
              <el-input v-show="false" v-model.trim="selectedMsg.giftUrl" />
              <photo-cropper-dialog
                ref="giftUrlPhotoCropper"
                auto-crop-width="80px"
                auto-crop-height="80px"
                :fixed-number="[80, 80]"
                :enlarge="1"
                @photoCropperSave="logoUrlPhotoCropperSave"
              />
              <div :class="{ upload_game_img: true, border: !selectedMsg.giftUrl }" @click="openPhotoCropper('giftUrl')">
                <img v-if="selectedMsg.giftUrl" class="show_img" :src="getStaticFileUrl(selectedMsg.giftUrl)" alt="">
                <i v-else class="el-icon-plus" />
                <div class="notice">上传规格：80*80px，不能超过3M。</div>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="name" label="礼物名称">
              <el-input v-model="selectedMsg.name" maxlength="5" type="text" placeholder="请输入" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="price" label="礼物价格">
              <el-input v-model="selectedMsg.price" type="number" :min="0" placeholder="请输入">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="heat" label="增加热度">
              <el-input v-model="selectedMsg.heat" type="number" :min="1" placeholder="请输入" />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="cancelDialog">取 消</el-button>
        <el-button v-if="isEdit" :loading="buLoading" size="medium" type="primary" @click="confirmEdit">确 定</el-button>
        <el-button v-else :loading="buLoading" size="medium" type="primary" @click="confirmAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import photoCropperDialog from './photoCropperDialog';
import validator from '@/lib/validate/index.js';
import { SiSTKWEventsManagementCreateGiftInput } from '@/lib/form/game/swaggerForm';
import { api_PUT_EventsManagementGiftId, api_POST_EventsManagementGift } from '@/extend/api/gameswaggerApi/app';
export default {
  components: {
    photoCropperDialog
  },
  data() {
    return {
      loading: false,
      isEdit: false,
      buLoading: false,
      giftDialogVisible: false,
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      selectedMsg: new SiSTKWEventsManagementCreateGiftInput(),
      selectedMsg_rules: {
        giftUrl: [{ required: true, message: '礼物图片不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '礼物名称不能为空', trigger: 'blur' }],
        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPrice(value, '请输入正确礼物价格，至多精确到分'));
            },
            trigger: 'blur'
          }],
        heat: [
          { required: true, message: '热度值不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPositiveNumber(value, '请输入为正整数的热度值'));
            },
            trigger: 'blur'
          }]
      }
    };
  },
  computed: {
    title: function() {
      return this.isEdit ? '编辑礼物' : '添加礼物';
    }
  },
  mounted() {
  },
  methods: {
    init() {
      this.$refs.logoUrlPhotoCropper.init();
    },
    confirmEdit() {
      this.$refs.selectedMsg.validate(valid => {
        if (!valid) return;
        this.loading = true;
        this.buLoading = true;
        this.selectedMsg.price = Math.ceil(this.selectedMsg.price * 100);
        api_PUT_EventsManagementGiftId(this.selectedMsg.id, this.selectedMsg).then(res => {
          this.loading = false;
          this.buLoading = false;
          if (res) {
            this.$message({ type: 'success', message: '更新成功' });
            this.selectedMsg = new SiSTKWEventsManagementCreateGiftInput();
            this.$parent.getPageList();
            this.giftDialogVisible = false;
          }
        }, error => {
          this.loading = false;
          this.buLoading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    },
    confirmAdd(formName) {
      this.$refs.selectedMsg.validate(valid => {
        if (!valid) return;
        this.loading = true;
        this.buLoading = true;
        this.selectedMsg.price = this.selectedMsg.price * 100;
        api_POST_EventsManagementGift(this.selectedMsg).then(res => {
          this.loading = false;
          this.buLoading = false;
          if (res) {
            this.$message({ type: 'success', message: '创建成功' });
            this.selectedMsg = new SiSTKWEventsManagementCreateGiftInput();
            this.$parent.getPageList();
            this.giftDialogVisible = false;
          }
        }, error => {
          this.loading = false;
          this.buLoading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    },
    cancelDialog() {
      this.giftDialogVisible = false;
      this.selectedMsg = new SiSTKWEventsManagementCreateGiftInput();
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    openPhotoCropper(code) {
      this.$refs[code + 'PhotoCropper'].open(this.selectedMsg[code]);
    },
    // 礼物图片回显
    logoUrlPhotoCropperSave(fileUrl) {
      this.$set(this.selectedMsg, 'giftUrl', fileUrl.tempUrl);
    }
  }
};
</script>

<style lang="scss" scoped>
  .avatar-uploader {
    display: inline-block;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 90px;
    text-align: center;
    width: 97px;
    height: 90px;
    background: #f7f7f7;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
  }
  .imgPrompt {
    font-size: 14px;
    color: #ffba00;
    margin-left: 20px;
    margin-top: 20px;
  }
  .upload_game_img {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .upload_game_img.border {
    border: 1px dotted #DCDFE6;
  }
  .upload_game_img:hover {
    border-color: #409eff;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: top;
  }
  .upload_game_img .img_text {
    font-size: 12px;
    color: rgba(0,0,0,0.65);
    text-align: center;
    position: absolute;
    top: 60px;
    line-height: 20px;
    width: inherit;
  }
  .upload_game_img .notice {
    position: absolute;
    height: 100px;
    line-height: 150px;
    left: 100px;
    top: 0px;
    width: 230px;
    margin-left: 15px;
    color: #FFBA00;
    font-size: 14px;
    text-align: left;
  }
</style>
